<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>患者信息</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <style>
        body{
          
            margin-right: 50px;
            margin-left: 50px;
        }
      </style>
</head>

<body>
    <div id="app">
<!-- 导航栏 -->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">患者信息</el-menu-item>
            <el-menu-item index="2">医生信息</el-menu-item>
            <el-menu-item index="3">账单信息</el-menu-item>
            <el-menu-item index="4">挂号信息</el-menu-item>
          </el-menu>
          <br/>
<!-- 查询,删除 -->
<el-form :inline="true" :model="searchByCondition" class="demo-form-inline">
  <el-form-item label="患者姓名">
    <el-input v-model="searchByCondition.name" placeholder="姓名"></el-input>
  </el-form-item>
  <el-form-item label="患者id">
    <el-input v-model="searchByCondition.id" placeholder="身份证号"></el-input>
  </el-form-item>
  <el-form-item label="性别">
    <el-select v-model="searchByCondition.gender" placeholder="性别">
      <el-option label="男" value="男"></el-option>
      <el-option label="女" value="女"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="getByCondition">查询</el-button>
    <el-button type="success" @click="getAllPatients" plain>查询全部</el-button>
    <el-button type="warning" @click="addFormVisible=true" plain>添加患者</el-button>
    <el-button type="danger" @click="deletes" plain>批量删除</el-button>

  </el-form-item>
</el-form>
<br/>

<!-- 表格 -->
    <template>
        <el-table
          :data="patients"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
          type="selection"
          width="55"
         >
        </el-table-column>

          <el-table-column
          type="index"
          label="序号"
          width="100"
          >
        </el-table-column>

          <el-table-column
            label="身份证号"
            >
            <template slot-scope="patient">
              <span style="margin-left: 10px">
               <a style="color: black; text-decoration: none;" :href="`registration.html?patientId=${patient.row.id}`" title="查询患者所有挂号单" > {{ patient.row.id }}</a>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="姓名"
            >
            <template slot-scope="patient">
              <a :href="`bill.html?patientId=${patient.row.id}`" title="查询患者所有账单"><el-tag size="medium">{{ patient.row.name }}</el-tag></a>
            </template>
          </el-table-column>

          <el-table-column
            label="性别"
            >
            <template slot-scope="patient">
              <span tyle="margin-left: 10px">{{ patient.row.gender }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" >
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                     </template>
          </el-table-column>
        </el-table>
      </template>


<!-- 修改弹窗 -->
<el-dialog title="修改患者信息" :visible.sync="updateFormVisible" width="29%">
  <el-form :model="updateForm">
    <el-form-item label="姓名" :label-width="formLabelWidth">
      <el-input placeholder="请输入姓名" style="width: 217px;" v-model="updateForm.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth">
      <el-select v-model="updateForm.gender" placeholder="请选择性别">
        <el-option style="width: 217px;" label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="updateFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="update">确 定</el-button>
  </div>
</el-dialog>


<!-- 添加弹窗 -->
<el-dialog title="添加患者信息" :visible.sync="addFormVisible" width="29%">
  <el-form :model="addForm" :rules="rules">
    <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
      <el-input placeholder="请输入姓名" style="width: 217px;" v-model="addForm.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="身份证号" :label-width="formLabelWidth" prop="id">
      <el-input placeholder="请输入身份证号" style="width: 217px;" v-model="addForm.id" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
      <el-select style="width: 217px;" v-model="addForm.gender" placeholder="请选择性别">
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="add">确 定</el-button>
    <el-button @click="addForm={}" type="warning">重置</el-button>
    <el-button @click="addFormVisible = false">取 消</el-button>
  </div>
</el-dialog>
    </div>
</body>


<script src="../js/axios-0.18.0.js"></script>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/patient.js"></script>
</html>